<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?=$data['title'];?> - 在线考试系统</title>
    <link rel="stylesheet" href="__PUBLIC__/Css/home/home_style.css" type="text/css">
    <script src="__PUBLIC__/Js/home/jquery.min.js"></script>
    <script src="__PUBLIC__/Js/home/jquery.timeout.js"></script>
    <script type="text/javascript">
        //关闭页面前的提示
        $(function(){
            $(window).on("beforeunload", function () {
                return '您尚未交卷！此操作将导致您的回答无效。';
            });
            timeOver = false;//保存当前是否已经达到交卷时间
            $(".timeout").timeout({
                //考试时间
                "maxTime":<?=$data['timeout']?>,
                "onTimeOver":function (){
                timeOver = true;
                alert("考试时间结束，系统自动交卷。");
                $("#testForm").submit();
            }
        });

            $("#testForm").submit(function(event){
                $(window).off("beforeunload");
                if(timeOver == false){
                    checkMultiple(event);
                }
            });

            //检查多选题至少要选择一项
            function checkMultiple(event){
                $(".jq-multiple .question-each").each(function(){
                    if($(this).find(".question-option input[type=checkbox]:checked").length < 1){
                        $(this).find(".question-option input[type=checkbox]:first").focus();
                        event.preventDefault();//阻止表单提交
                        alert("您有多选题还未作答。");
                        return false;
                    }
                });
            };
        });
    </script>
    <style type="text/css">
        .question-choose {
            position: fixed;
            top: 137px;
            left: 80%;
            width: 100px;
            text-align: center;
        }

        .question-choose a {
            display: block;
            width: 50px;
        }
    </style>
</head>
<body>
<div class="top">
    <div class="top-title">正在考试(剩余时间 <span class="timeout"></span>)</div>
</div>
<div class="main">
    <div class="main-wrap">
        <div class="question-top">
            <div class="question-title"><?=$data['title'];?></div>
            <div class="question-nav question-choose">
                <a href="#binary">判断题</a>
                <a href="#single">单选题</a>
                <a href="#multiple">多选题</a>
                <a href="#fill">填空题</a>
            </div>
        </div>
        <form action="__MODULE__/Tf/index" method="post" id="testForm">
            <input type="hidden" name="id" value="{$id}">
            <input type="hidden" name="pd" value="{$pdscore}">
            <input type="hidden" name="tk" value="{$tkscore}">
            <input type="hidden" name="selects" value="{$selectsscore}">
            <div id="binary" class="anchor"></div>
            <div class="question-wrap">
                <div id="pd" class="question-type">一丶判断题 <span>(共{$pdcount}题，每题{$pdscore}分)</span></div>
                <volist name="pdlist" id="vo">
                <div class="question-each">
                    <div class="question-name">{$vo.content}</div>
                    <div class="question-option">
                        <label><input type="radio" name="pd{$vo.id}" value="yes" required>对</label>
                        <label><input type="radio" name="pd{$vo.id}" value="no" required>错</label>
                    </div>
                </div>
                </volist>
            </div>
            <div id="single" class="anchor"></div>
            <div class="question-wrap">
                <div class="question-type">二丶单选题 <span>(共{$selectscount}题，每题{$selectscore}分)</span></div>
                <volist name="selectslist" id="vo">
                <div class="question-each">
                    <div class="question-name">
                        {$vo.content}
                    </div>
                    <div class="question-option">
                        <label><input name="selects{$vo.id}" type="radio" value="a">A.{$vo.select_a}
                        </label>
                        <label><input name="selects{$vo.id}" type="radio" value="b">B.{$vo.select_b}
                        </label>
                        <label><input name="selects{$vo.id}" type="radio" value="c">C.{$vo.select_c}
                        </label>
                        <label><input name="selects{$vo.id}" type="radio" value="d">D.{$vo.select_d}
                        </label>
                    </div>
                </div>
                </volist>
            </div>
            <div id="multiple" class="anchor"></div>
            <div class="question-wrap jq-multiple">
                <div class="question-type">三丶多选题 <span>(共题，每题<?=$score['multiple'];?>分)</span>
                </div>
                <?php foreach($data['data']['multiple']['data']as $k =>$v):?>
                <div class="question-each">
                    <div class="question-name">
                        <?=$k,'.&nbsp',$v['question'];?>
                    </div>
                    <div class="question-option">
                        <label><input type="checkbox" name="multiple[<?=$k;?>][]" value="A"
                        >A.<?=$v['option'][0];?></label>
                        <label><input type="checkbox" name="multiple[<?=$k;?>][]" value="B"
                        >B.<?=$v['option'][1];?></label>
                        <label><input type="checkbox" name="multiple[<?=$k;?>][]" value="C"
                        >C.<?=$v['option'][2];?></label>
                        <label><input type="checkbox" name="multiple[<?=$k;?>][]" value="D"
                        >D.<?=$v['option'][3];?></label>
                    </div>
                </div>
                <?php endforeach;?>
            </div>

            <div id="fill" class="anchor"></div>
            <div class="question-wrap">
                <div class="question-type">四丶填空题 <span>(共{$tkcount}题，每题{$tkscore}分)</span></div>
                <volist name="tklist" id="vo">
                <div class="question-each">
                    <div class="question-name">
                        {$vo.content}
                    </div>
                    <div class="question-option">
                        <label>请输入答案：<input type="text" name="tk{$vo.id}" value="" required></label>
                    </div>
                </div>
                </volist>
            </div>
            <div class="question-act">
                <input type="submit" value="交卷">
            </div>
        </form>
    </div>
</div>
<div class="footer">
    PHP在线考试系统
</div>
</body>
</html>